import React, { Component } from 'react';
import { Table, Button, Tree } from 'antd';
import styles from '../../../index.less';
import * as config from '../../../utils/config';

const { TreeNode } = Tree;

class TabJurCon extends Component {
  constructor(props) {
    super(props);
    this.state = {
      sActiveId: props.sActiveId, /* 窗体Id */
      dispatch: props.dispatch,
      sTabId: props.app.currentPane.key, /* 当前标签 */
      componentName: props.componentName, /* 组件名 */
      gdsformconst: props.gdsformconst, /* 常量 */
      jurConColumn: [],
      treeData: [],
      checkedKeys: [],
      allKeys: [], /* 所有节点 */
      allFatherKeys: [], /* 所有父节点 */
      autoExpandParent: true,
    };
  }

  componentWillMount() {
    /* 获取表数据 */
    const {
      gdsformconst, dispatch, sActiveId, sTabId, componentName,
    } = this.state;
    if (this.state.jurConColumn.length === 0) {
      /* 权限内容标题 */
      const column = gdsformconst.filter(item => item.sName === 'jurUserGroupData')[0];
      const jurConColumn = [{
        title: column.showName,
        dataIndex: column.sName,
        key: column.sName,
      }];
      this.setState({ jurConColumn });
    }
    /* 获取树内容 */
    const dataUrl = `${config.server_host}sysjurisdiction/getSysjurisdictionTree?sModelsId=${sActiveId}`;
    dispatch({ type: 'content/getUrlData', payload: { url: dataUrl, sTabId, componentName } });
  }

  componentWillReceiveProps(nextProps) {
    const { dataList } = nextProps.content;
    const { sDataListTabId, loading, componentName } = dataList;
    if (this.state.sTabId === sDataListTabId && this.state.sTabId === nextProps.app.currentPane.key
      && this.state.componentName === componentName) {
      if (loading) return;
      const { urlData } = dataList;
      if (this.state.treeData.length === 0) {
        const treeData = [];
        const allChildKeys = [];
        const allKeys = [];
        const allChildTree = [];
        const allFatherKeys = [];
        urlData.forEach((child) => {
          treeData.push({
            title: child.name,
            key: child.key,
            disabled: true,
          });
          allKeys.push(child.key);
          if (child.children.length > 0) {
            allFatherKeys.push(child.key);
            const index = treeData.findIndex(item => item.key === child.key);
            this.handleChildrenData(child.children, treeData[index], allChildKeys, allKeys, allChildTree, allFatherKeys);
          } else {
            allChildKeys.push(child.key);
            allChildTree.push({ sKey: child.key, sAction: child.sName });
          }
        });
        this.setState({
          treeData, checkedKeys: allChildKeys, allKeys, allFatherKeys,
        });
        this.props.onTreeData(treeData, allKeys, allChildKeys, allChildTree);
      }
    }
    const { checkedKeys, treeData } = nextProps;
    this.setState({
      checkedKeys,
      treeData,
    });
  }

  onExpand = (expandedKeys) => {
    this.setState({
      expandedKeys,
      autoExpandParent: false,
    });
  };

  onCheck = (checkedKeys, e) => {
    const { halfCheckedKeys } = e;
    const newCheckedKeys = [...checkedKeys, ...halfCheckedKeys];
    this.props.onNoKey(checkedKeys, newCheckedKeys);
  };

  handleChildrenData = (data, treeChildData, allChildKeys, allKeys, allChildTree, allFatherKeys) => {
    treeChildData.children = [];
    data.forEach((child) => {
      treeChildData.children.push({
        title: child.name,
        key: child.key,
        disabled: true,
      });
      allKeys.push(child.key);
      if (child.children !== undefined && child.children.length > 0) {
        allFatherKeys.push(child.key);
        const index = treeChildData.children.findIndex(item => item.key === child.key);
        this.handleChildrenData(child.children, treeChildData.children[index], allChildKeys, allKeys, allChildTree, allFatherKeys);
      } else {
        allChildKeys.push(child.key);
        allChildTree.push({ sKey: child.key, sAction: child.sName });
      }
    });
  };

  handleAllClick = () => {
    const { allKeys } = this.state;
    this.props.onNoKey(allKeys, allKeys);
  };

  handleUnAllCilck = () => {
    this.props.onUnAllClick();
  };

  handleUnfold = () => {
    /* 全部展开 */
    const { allFatherKeys } = this.state;
    this.setState({
      expandedKeys: allFatherKeys,
    });
  };

  handleFold = () => {
    /* 全部折叠 */
    this.setState({
      expandedKeys: [],
    });
  };

  renderTreeNodes = (data) => {
    return data.map((item) => {
      if (item.children) {
        return (
          <TreeNode title={item.title} key={item.key} disabled={item.disabled} dataRef={item}>
            {this.renderTreeNodes(item.children)}
          </TreeNode>
        );
      }
      return <TreeNode {...item} />;
    });
  };

  render() {
    const {
      jurConColumn, treeData, checkedKeys, expandedKeys, autoExpandParent,
    } = this.state;
    const jurConData = [{
      key: 1,
      jurUserGroupData:
  <Tree
    checkable
    onExpand={this.onExpand}
    expandedKeys={expandedKeys}
    onCheck={this.onCheck}
    checkedKeys={checkedKeys}
    autoExpandParent={autoExpandParent}
  >
    {this.renderTreeNodes(treeData)}
  </Tree>,
    }];
    return (
      <div>
        <div className={styles.tableOptionJur} style={{ marginTop: 15 }}>
          <Button onClick={this.handleAllClick}>全选</Button>
          <Button onClick={this.handleUnAllCilck}>全不选</Button>
          <Button onClick={this.handleUnfold}>全部展开</Button>
          <Button onClick={this.handleFold}>全部折叠</Button>
        </div>
        <Table
          bordered
          columns={jurConColumn}
          dataSource={jurConData}
          size="middle"
          pagination={false}
        />
      </div>
    );
  }
}

export default TabJurCon;
